<template>
  <div>
    <ZgDialog v-model="visible" title="批量设置" @ok="save">
      <ZgEmpty v-if="columns.length===0" description="未查询到表单字段"></ZgEmpty>
      <a-form v-else :labelCol="{ span: 4 }" :wrapperCol="{ span: 20 }">
        <a-form-item label="选择字段">
          <ZgSelect :options="options" v-model="code"></ZgSelect>
        </a-form-item>
        <a-form-item v-if="c" label="设置值" :required="c.isNeed">
          <ZgInput v-model="strVal" v-if="c.compType==='单行文本'" ></ZgInput>
          <ZgSelect v-model="strVal" v-if="c.compType==='下拉选择'" :options="c.extra.下拉选项"></ZgSelect>
          <ZgRadio v-model="strVal" v-if="c.compType === '单选'" :options="c.extra.选项"></ZgRadio>
          <ZgNumber v-model="numVal" v-if="c.compType==='整数'"></ZgNumber>
          <ZgNumber v-model="numVal" v-if="c.compType==='浮点数'" isFloat></ZgNumber>
          <ZgCheckbox v-model="boolVal" v-if="c.compType==='单选框'"></ZgCheckbox>
          <ZgMultiple v-model="strVal" v-if="c.compType==='多选'" :code="c.extra.字典类型"></ZgMultiple>
          <ZgDatePicker v-model="strVal" v-if="c.compType==='日期'"></ZgDatePicker>
          <ZgDictionary v-model="strVal" v-if="c.compType==='字典'" :code="c.extra.字典类型"></ZgDictionary>
          <ZgSwitch v-model="boolVal" v-if="c.compType==='开关'"></ZgSwitch>
          <ZgTextarea
            v-model="strVal"
            v-if="c.compType==='多行文本'"
            :rows="parseInt(c.extra.行数)"
            :maxLength="c.extra&&c.extra.maxLength"
            class="mb15"></ZgTextarea>
          <ZgTinymce v-model="strVal" v-if="c.compType==='富文本'" :height="parseInt(c.extra.高度)"></ZgTinymce>
          <ZgUpImg v-model="strVal" v-if="c.compType==='图片'"></ZgUpImg>
        </a-form-item>
      </a-form>
    </ZgDialog>
  </div>
</template>
<script>
export default {
  props: {
    formCode: {
      type: String,
      default: ''
    }
  },
  data () {
    return {
      visible: false,
      ids: [],
      columns: [],
      code: '',
      strVal: '',
      numVal: 0,
      boolVal: false
    }
  },
  watch: {
    formCode () {
      this.fetchColumn()
    }
  },
  computed: {
    options () {
      return this.columns.map(t => {
        return {
          value: t.code,
          label: t.name
        }
      })
    },
    c () {
      return this.columns.filter(t => {
        return t.code === this.code
      })[0]
    }
  },
  mounted () {
    this.fetchColumn()
  },
  methods: {
    open (ids) {
      this.ids = ids
      this.visible = true
    },
    fetchColumn () {
      if (!this.formCode || this.formCode.length === 0) {
        return
      }
      this.$http.get('/zg-autoform/zxb/form/column', {
        formCode: this.formCode
      }, data => {
        this.columns = data.filter(t => {
          return !['日期时间'].includes(t.compType)
        }).map(t => {
          return Object.assign({}, t, {
            extra: JSON.parse(t.extra),
            defaultVal: this.generateDefaultVal(t)
          })
        })
      })
    },
    save () {
      // 验证必填项
      const compType = this.c.compType
      if (this.c.isNeed) {
        if (['单选框', '开关'].includes(compType)) {
        } else if (['整数', '浮点数'].includes(compType)) {
          if (this.numVal === 0) {
            this.$error({ title: `${this.c.name}不能为0` })
            return
          }
        } else {
          if (this.strVal.length === 0) {
            this.$error({ title: `${this.c.name}为必填项` })
            return
          }
        }
      }
      // 验证正则，只验证单行文本
      if (compType === '单行文本' && this.c.regex && this.c.regex.length > 0) {
        const reg = new RegExp(this.c.regex)
        if (!reg.test(this.strVal)) {
          this.$error({ title: this.c.errorMsg })
          return
        }
      }

      this.$http.post('/zg-autoform/zxb/table/data/batchForColumn', {
        ids: this.ids,
        formCode: this.formCode,
        code: this.c.code,
        compType: this.c.compType,
        strVal: this.strVal,
        numVal: this.numVal + '',
        boolVal: this.boolVal + ''
      }, () => {
        this.visible = false
        this.$emit('ok')
      })
    }
  }
}
</script>

<style lang="scss" scoped>
</style>
